<template>
  <div id="app">
    <van-button @click="cancel">取消</van-button>
    <van-button @click="showPanel = true">{{datesStr}}</van-button>
    <van-button @click="submit">确定</van-button>
    <vue-date-range-picker
      v-show="showPanel"
      :default-start-date="defaultStartDate"
      :default-end-date="defaultEndDate"
      :max-pickable-date="maxDate"
      ref="picker"
      @changeDates="changeDates"
    ></vue-date-range-picker>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function () {
    return {
      maxDate: "2020-10-21",
      showPanel: false,
      dates: {
        startDateData: {
          date: null,
          month: null,
          utcDay: null,
          year: null
        },
        endDateData: {
          date: null,
          month: null,
          utcDay: null,
          year: null
        }
      },
      datesStr: "测试",
      defaultStartDate: "2018-01-20",
      defaultEndDate: "2020-01-20"
    };
  },
  methods: {
    changeDates: function (dates) {
      this.dates = dates;
    },
    cancel: function () {
      this.showPanel = false;
      this.$refs.picker.reset();
    },
    submit: function () {
      this.showPanel = false;
      this.dates = this.$refs.picker.submit();
      let dateStr = "";
      if (this.dates.startDateData) {
        // this.defaultStartDate = [this.dates.startDateData.year, this.dates.startDateData.month, this.dates.startDateData.date].join("-");
        dateStr = [
          this.dates.startDateData.year,
          this.dates.startDateData.month,
          this.dates.startDateData.date
        ].join("-");
      }
      if (this.dates.endDateData) {
        // this.defaultEndDate = [this.dates.endDateData.year, this.dates.endDateData.month, this.dates.endDateData.date].join("-");
        dateStr =
          dateStr +
          " 到 " +
          [
            this.dates.endDateData.year,
            this.dates.endDateData.month,
            this.dates.endDateData.date
          ].join("-");
      }
      this.datesStr = dateStr;
    }
  }
};
</script>

<style lang="scss" scoped>
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;

  .header {
    font-size: 0.14rem;
  }
}
</style>
